<template>
    <div class="tab">
        <router-link tag="div" class="tab-item" to="/index">
            <span class="tab-icon index"></span>
            <p class="tab-link">首页</p>
        </router-link>
        <router-link tag="div" class="tab-item" to="/gamemod">
            <span class="tab-icon tab-game"></span>
            <p class="tab-link">游戏</p>
        </router-link>
        <router-link tag="div" class="tab-item" to="/shop">
            <span class="tab-icon tab-shop"></span>
            <p class="tab-link">商城</p>
        </router-link>
        <!-- <router-link tag="div" class="tab-item" to="/service">
            <span class="tab-icon tab-service"></span>
            <p class="tab-link">娱乐</p>
        </router-link> -->
        <router-link tag="div" class="tab-item" to="/mine">
            <span class="tab-icon tab-mine"></span>
            <p class="tab-link">我的</p>
        </router-link>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

.tab {
    position: fixed;
    display: flex;
    height: 50px;
    line-height: 50px;
    font-size: $font-size-medium;
    background: $color-header-bg;
    width: 100%;
    bottom: 0;
    color: $color-text-white;
    z-index: 0;

    .tab-item {
        flex: 1;
        text-align: center;

        .tab-link {
            line-height: 20px;
        }

        .tab-icon {
            display: block;
            width: 24px;
            height: 24px;
            background-size: 24px 24px;
            margin: 0 auto;
            margin-top: 6px;

            &.index {
                bg-image('index');
            }

            &.tab-game {
                bg-image('game');
            }

            &.tab-shop {
                bg-image('shop');
            }

            &.tab-service {
                bg-image('yule');
            }

            &.tab-mine {
                bg-image('mime');
            }
        }

        &.router-link-active {
            background: $color-nav-bg-active;

            .index {
                bg-image('index1');
            }

            .tab-game {
                bg-image('game1');
            }

            .tab-shop {
                bg-image('shop1');
            }

            .tab-service {
                bg-image('yule1');
            }

            .tab-mine {
                bg-image('mime1');
            }
        }
    }
}
</style>
